<template>
  <el-form :model="formData" ref="formRef" :inline="true" class="search-form">
    <!-- 搜索条件表单项 -->
    <div class="form-content">
      <el-form-item 
        v-for="field in fields" 
        :key="field.prop"
        :label="field.label" 
        :prop="field.prop"
      >
        <!-- 日期范围选择器 -->
        <el-date-picker
          v-if="field.type === 'daterange'"
          v-model="dateRange"
          type="daterange"
          :start-placeholder="field.startPlaceholder"
          :end-placeholder="field.endPlaceholder"
          :value-format="field.valueFormat"
          :range-separator="field.rangeSeparator"
          @change="handleDateRangeChange"
        />
        <!-- 下拉选择器 -->
        <el-select
          v-else-if="field.type === 'select'"
          v-model="formData[field.prop]"
          :placeholder="field.placeholder"
          clearable
          filterable
        >
          <el-option
            v-for="item in field.options"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        <!-- 普通输入框 -->
        <el-input 
          v-else
          v-model="formData[field.prop]" 
          :placeholder="field.placeholder" 
          clearable 
        />
      </el-form-item>
    </div>
    <!-- 按钮区域 -->
    <div class="form-buttons">
      <el-form-item>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </div>
  </el-form>
</template>

<script setup>
import {ref, reactive, watch, onMounted} from 'vue'
import {listGoods} from '@/api/goods'  // 导入课程列表接口

const props = defineProps({
  fields: {
    type: Array,
    required: true
  },
  modelValue: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['update:modelValue', 'search', 'reset'])

// 表单数据
const formData = reactive({...props.modelValue})
const formRef = ref(null)  // 添加表单引用

// 日期范围
const dateRange = ref([])

// 监听外部数据变化
watch(() => props.modelValue, (newVal) => {
  Object.assign(formData, newVal)
}, {deep: true})

// 监听内部数据变化
watch(formData, (newVal) => {
  emit('update:modelValue', {...newVal})
}, {deep: true})

// 处理日期范围变化
const handleDateRangeChange = (val) => {
  if (val) {
    formData.createStartDate = val[0]
    formData.createEndDate = val[1]
  } else {
    formData.createStartDate = ''
    formData.createEndDate = ''
  }
}

// 搜索
const handleSearch = () => {
  emit('search', formData)
}

// 重置
const handleReset = () => {
  // 重置日期范围
  dateRange.value = []

  // 重置表单数据
  Object.keys(formData).forEach(key => {
    // 保留分页相关参数
    if (!key.includes('pageDomain')) {
      formData[key] = ''
    }
  })

  // 重置分页参数
  if (formData.pageDomain) {
    formData.pageDomain.pageNum = 1
    formData.pageDomain.pageSize = 20
    formData.pageDomain.orderByColumn = ''
    formData.pageDomain.isAsc = ''
  }

  // 触发重置事件
  emit('reset')

  // 立即触发一次更新
  emit('update:modelValue', {...formData})
}

// 获取课程列表
const getCourseList = async () => {
  try {
    const res = await listGoods({})
    // 找到课程名称字段并设置选项
    const courseField = props.fields.find(field => field.prop === 'goodsId')
    console.log(res)
    console.log(courseField)
    if (courseField) {
      courseField.options = res.rows || []
    }
  } catch (error) {
    console.error('获取课程列表失败：', error)
  }
}

onMounted(() => {
  getCourseList()
})
</script>

<style scoped lang="scss">
.search-form {
  background-color: #fff;
  padding: 12px 16px 0;
  border-radius: 4px;
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  .form-content {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0 12px;
  }

  .form-buttons {
    flex-shrink: 0;
    margin-left: 12px;

    :deep(.el-form-item) {
      margin-bottom: 12px;
      margin-right: 0;
    }
  }

  :deep(.el-form-item) {
    margin-bottom: 12px;
    margin-right: 0;

    .el-form-item__label {
      padding-right: 8px;
    }

    .el-input {
      width: 200px;
    }

    .el-date-editor {
      width: 240px;
    }
  }

  :deep(.el-button) {
    padding: 8px 15px;

    & + .el-button {
      margin-left: 8px;
    }
  }

  :deep(.el-select) {
    width: 200px;
  }
}
</style>
